'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import './style.less';
import PageLoading from '../../components/pageLoading/PageLoading.jsx';
import MainArea from '../../components/common/mainArea'

import { setDialog } from '../../reducers/common/actions';
import { getRow,saveRow,changeTabKey } from '../../reducers/page/actions';
import { Menu, Icon,Button,Table } from 'antd';
import BottomBox from './BottomBox.jsx';
import DiyBox from './DiyBox.jsx';
import SwiperBox from './SwiperBox.jsx';
import HomeBox from './HomeBox.jsx';
class Screen extends Component {
    constructor(props) {
        super(props);
        let {hash} = this.props.params;
        this.props.getRow(hash);
    }
    handleClick(e){
        //console.log(e.key)
        this.props.changeTabKey(e.key)
    }
    render() {
        if(this.props.fetchingDetail || !this.props.detail.title)
            return <PageLoading />;

        let body;

        const TYPES = this.props.TYPES;
        let items = this.props.detail.items.asMutable();

        if(this.props.curTabKey == 'home'){
            body = <HomeBox />
        }else{
            let data = this.props.detail.items[this.props.curTabKey];
            if(data.type == 0){
                body = <DiyBox />
            }
            if(data.type == 1){
                body = <SwiperBox />
            }
            if(data.type == 2){
                body = <BottomBox />
            }
        }
        return (
            <MainArea title="页面修改" >
                <div className="page pageEdit pt f14">
                    <div className="header" style={{ marginTop:16,marginBottom: 0 }}>
                        <Button type="default" style={{marginRight:8}} icon="left" onClick={()=>{location.href='#/mobile/admin/page'}}>返回</Button>&nbsp;&nbsp; | &nbsp;&nbsp;
                        <Button type="primary" icon="save" onClick={()=>{this.props.saveRow()}}>保存</Button>
                    </div>

                    <div className="body">
                        <Menu onClick={::this.handleClick}
                              selectedKeys={[""+this.props.curTabKey]}
                              mode="horizontal">
                            <Menu.Item key="home">
                                基本设置
                            </Menu.Item>
                            {
                                items.map((item,i)=>{
                                    return (
                                        <Menu.Item key={i}>
                                            {TYPES[item.type]} {i+1}
                                        </Menu.Item>
                                    )
                                })
                            }
                        </Menu>
                        <div className="body_inner">
                            {body}
                        </div>
                    </div>
                </div>
            </MainArea>
        )
    }
}

export default connect(
    state =>{
        return {
            fetchingDetail:state.page.fetchingDetail,
            row:state.page.row,
            TYPES:state.page.TYPES,
            curTabKey:state.page.curTabKey,
            detail:state.page.detail,
            dialog:state.common.dialog
        };
    },
    dispatch =>{
        return {
            setDialog: (key,value) => dispatch(setDialog(key,value)),
            getRow: (hash) => dispatch(getRow(hash)),
            saveRow:()=>dispatch(saveRow()),
            changeTabKey:(key)=>dispatch(changeTabKey(key))
        };
    }
)(Screen);
